<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../index.css">
</head>
<body>
    <pre>
        由于本章节概念比较多，不再一一记录，只记录主要方法，具体参考<a href="https://www.yuque.com/fe9/basic/tlk8ck">前端九部入门手册-Flex布局</a>
        1.容器属性(display flex-direction flex-wrap flex-flow align-items align-content)
            <xmp>
                <div class="container">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                </div>
            </xmp>
            
            display:用于将父元素定义为Flex布局的容器，display:flex | inline-flex;分别表示容器对外为块级元素或者行内元素，对内表现一致。
                .container {
                    display: flex | inline-flex;
                }
            flex-direction: 定义主轴方向，即项目的排列方向。
                row(默认值):主轴在水平方向，从左到右
                row-reverse: 主轴在水平方向，从右到左
                column: 主轴在垂直方向，从上到下
                column-reverse：主轴在垂直方向，从下到上
                .container {
                    flex-direction: row | row-reverse | column | column-reverse;
                }
            flex-wrap：定义项目在一行放不下时该如何换行
                nowrap：默认，不换行
                wrap： 换行，第一行在上面
                wrap-reverse：换行，第一行在下面
                .container{
                    flex-wrap: nowrap | wrap | wrap-reverse
                }
            flex-flow: flex-direction和flex-wrap的缩写，默认row nowrap

            justify-content: 定义项目在主轴上的对齐方式
                flex-start: 默认，与主轴起点对齐，
                flex-end：与主轴终点对齐， 
                center：项目居中，
                space-between:两端对齐，项目之间的距离都相等
                space-around: 两侧间距相等，项目之间的间隔是项目与容器间隔的两倍
                .container{
                    justify-content: flex-start | flec-end | center | space-between | space-around
                }
            align-items: 定义项目在交叉轴上对齐方式
                stretch: 默认，如果项目未设置高度，项目将占满容器的高度
                flex-start: 与交叉轴起点对齐
                flex-end: 与交叉轴终点对齐
                center：居中对齐
                baseline：项目第一行文字的基线对齐
                .container{
                    align-items: flex-start | flex-end | center | baseline | stretch
                }
            align-content: 定义多根轴线的对齐方式，若主轴在水平方向交叉轴在垂直方向，可理解为多行在垂直方向上的对齐方式，项目只有一行时不起作用。
                flex-start：与主轴起点对齐
                flex-end: 与主轴终点对齐
                center：居中对齐
                space-between：与交叉轴两端对齐
                space-around：每根轴线两侧间距相等
                stretch：默认值，项目未设置高度将占满整个容器 
                .container {
                    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
                }
        2.项目属性(order flex-grow flex-shrink flex-basis flex align-self)  
                order: 定义项目的排列顺序，默认值为0，数值越小越靠前
                    .item{
                        order: -1
                    }
                flex-grow: 定义项目的放大比例，默认为0，即使容器存在剩余空间也不放大
                    flex-grow为1是所有项目平分剩余空间，如果其中一个项目的flex-grow为2则该项目平分空间是其他项目的两倍
                    .item{
                        flex-grow: number
                    }
                flex-shrink: 定义项目缩小比例，默认为1即空间不足自动缩小。负值无效。如果项目的flex-shrink都为1则空间不足时全部等比缩小，若其中一个为0其余为1，则为0的不缩小其余的等比缩小
                    .item{
                        flex-shrink: 1 | 0
                    }
                flex-basis: 定义了在分配多余的空间之前，项目占据的主轴空间，默认值为 auto，即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。
                        flex-basis 的设置跟 width 或 height 一样，可以是像素，也可以是百分比。设置了 flex-basis 之后，它的优先级比 width 或 height 高。
                flex: 是flex-grow flex-shrink flex-basis的缩写  默认0 1 auto,后面两个属性可选。有两个快捷值none(0,0,auto)和auto(1,1,auto)，auto表示在需要的时候等比放大缩小，none表示不放大缩小
                align-self:定义的单个项目与其他项目不同的对齐方式，默认auto，即继承父元素的align-items属性，align-self的取值除了auto外其他与父元素align-items一样
                    .item {
                        align-self: auto | flex-start | flex-end | center | baseline | stretch;
                    }
            3.简单实例
                3.1 三栏布局
                    .container{
                        display: flex;
                    }
                    .left{
                        width: 100px;
                    }
                    .center{
                        flex: 1;
                        <!-- 或者flex-grow: 1 -->
                    }
                    .right{
                        width: 1
                    }
                3.2 不定宽高项目水平垂直居中
                    .container {
                        display: flex;
                        <!-- 水平居中 -->
                        justify-content: center;
                        <!-- 垂直居中 -->
                        align-items: center;
                    }
            4.浏览器兼容性及其他
                设置了Flex布局后，子元素的float vertical-align clear都将失效
                目前flex对浏览器的支持情况：
                    Chrome 29+
                    Firefox 28+
                    Safari 9+
                    iOS Safari 9+
                    Android 4.4+
                    IE Mobile 11+  
                低版本浏览器需要加前缀，兼容写法：
                    .page-wrap {
                        display: -webkit-box;      /* 老语法 iOS 6-, Safari 3.1-6 */
                        display: -moz-box;         /* 老语法 Firefox 19- (buggy but mostly works) */
                        display: -ms-flexbox;      /* 过渡语法 IE 10 */
                        display: -webkit-flex;     /* 新语法 Chrome */
                        display: flex;             /* 新语法, Spec - Opera 12.1, Firefox 20+ */
                    }
    </pre>
</body>
</html>